<template>
  <view class="biomarker-page">
    <view class="bio-header">
      <view class="bio-title">血清中的C肽</view>
      <view class="bio-alias">别名：S-C-peptide、S-Cpep</view>
    </view>
    <view class="bio-section">
      <view class="bio-section-title">参考区间</view>
      <view class="bio-range-switch">
        <button v-for="(unit, idx) in units" :key="unit" :class="['unit-btn', {active: unitIdx === idx}]" @tap="unitIdx = idx">{{ unit }}</button>
      </view>
      <view class="bio-range-value">{{ getRangeText() }}</view>
    </view>
    <view class="bio-section">
      <view class="bio-section-title">简要说明</view>
      <view class="bio-desc">
        C肽是胰岛素原分解产生的多肽，常用于评估胰岛β细胞功能。C肽水平异常与糖尿病、胰岛功能障碍等相关。
      </view>
    </view>
    <view class="bio-section">
      <view class="bio-section-title">文献与参考</view>
      <view class="bio-ref">OptimalDX: 1.1-2.1 ng/mL。<a href="https://www.longevity-tools.com/biomarker/S-C-peptide" target="_blank">Longevity Tools - C-peptide</a></view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
const units = ['ng/mL', 'µg/L', 'nmol/L']
const unitIdx = ref(0)
function getRangeText() {
  if (unitIdx.value === 0) {
    return 'OptimalDX: 1.1-2.1 ng/mL'
  } else if (unitIdx.value === 1) {
    return 'OptimalDX: 1.1-2.1 µg/L'
  } else {
    return 'OptimalDX: 0.37-0.71 nmol/L'
  }
}
</script>

<style scoped>
.biomarker-page {
  background: #fff;
  min-height: 100vh;
  padding: 32rpx 24rpx 48rpx 24rpx;
}
.bio-header {
  margin-bottom: 24rpx;
}
.bio-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #1976d2;
}
.bio-alias {
  color: #888;
  font-size: 24rpx;
  margin-top: 4rpx;
}
.bio-section {
  margin-bottom: 32rpx;
}
.bio-section-title {
  font-size: 30rpx;
  font-weight: 500;
  color: #222;
  margin-bottom: 8rpx;
}
.bio-range-switch {
  display: flex;
  gap: 18rpx;
  margin-bottom: 8rpx;
}
.unit-btn {
  background: #f4f8fb;
  color: #1976d2;
  border: 1rpx solid #d0e2f6;
  border-radius: 10rpx;
  padding: 6rpx 22rpx;
  font-size: 24rpx;
  cursor: pointer;
}
.unit-btn.active {
  background: #1976d2;
  color: #fff;
  border-color: #1976d2;
}
.bio-range-value {
  color: #e43d33;
  font-size: 26rpx;
  margin-bottom: 4rpx;
}
.bio-desc {
  color: #444;
  font-size: 26rpx;
  line-height: 1.7;
}
.bio-ref {
  color: #888;
  font-size: 22rpx;
}
.bio-ref a {
  color: #1976d2;
  text-decoration: underline;
}
</style> 